<template>
  <el-select
    v-model="selectObject" :disabled="disabled" :loading="loading" :placeholder="placeholder" :remote-method="page"
    filterable remote reserve-keyword value-key="id" default-first-option
  >
    <el-option
      v-for="o in options" :key="o.id"
      :label="(o.depart?o.depart+',':'')+(o.center?o.center+',':'')+o.cn+','+o.sn"
      :value="o"
    />
  </el-select>
</template>
<script>
import {detail, page} from "@/api/system/user";

export default {
  name: "UserSelect",

  props: {
    value: {type: Object, default: null},
    placeholder: {type: String, default: ''},
    disabled: {type: Boolean, default: false}
  },

  data() {
    return {
      selectObject: null,
      loading: false,
      options: [],
    }
  },
  watch: {
    'value': {
      handler(val) {
        this.options = []
        if (val !== null) {
          detail(val.id).then(res => {
            this.options.push(res.data)
          })
        }
        this.selectObject = val
      }, immediate: true
    },
    'selectObject': {
      handler() {
        this.$emit('input', this.selectObject)
      }, immediate: true
    }
  },

  methods: {
    page(query) {
      const form = {
        selectSearch: query
      }
      page(form, 0, 20).then(res => {
        this.options = res.data.records
      })
    },
  }
}
</script>

<style scoped>

</style>
